<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="100" align="bottom">
        <el-col :span="6">
          <el-input style="width: 200px" v-model="courseName" autosize prefix-icon="el-icon-document" placeholder="输入课程名搜索"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input style="width: 200px"  v-model="teacherName" autosize prefix-icon="el-icon-user-solid" placeholder="输入授课教师姓名"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select style="width: 150px" v-model="filterOption" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button  type="primary" icon="document" @click="loadTeacherCourse" :loading="searchLoading">搜索</el-button>
          <el-button  type="primary" icon="document" @click="browserPickUp" >查看选课情况</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="height: -webkit-calc(100% - 50px);margin-top: 10px">
      <xjr-table @select-change="currentChange" @custom-click="handleCourse" :loading="loading" ref="course_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
    <el-dialog :destroy-on-close="true"  width="30%" title="编辑课程" :visible.sync="showDialog">
      <el-form ref="form" :model="course" label-width="80px" :rules="rules">
        <el-form-item label="课程名"  prop="courseName">
          <el-input v-model="course.courseName"></el-input>
        </el-form-item>
        <el-form-item label="任课教师" prop="teacherName">
          <el-input :disabled="true" v-model="course.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="course.createTime"
            type="datetime"
            placeholder="修改创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
          <el-date-picker
            v-model="course.updateTime"
            type="datetime"
            placeholder="修改更新时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发布者" prop="createOperator">
          <el-input :disabled="true" v-model="course.createOperator"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveCourse">保存</el-button>
        <el-button type="primary" @click="showDialog=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog ref="pickUp" :destroy-on-close="true"  top="15vh" title="选课情况概览" :visible.sync="showPickUp">
      <h2 align="center">{{currentCourse.courseName}}</h2>
      <xjr-table ref="pick_up_table" :list="pickUpTableData" :headers="pickUpTableCols"></xjr-table>
    </el-dialog>
  </div>
</template>

<script>
  import common from './course-common'
  export default {
    name: "StudentCourseManage",
    mixins:[common],
    watch:{
      filterOption(newValue,oldValue){
        this.loadTeacherCourse();
      }
    },
    data() {
      return {
        currentCourse:{},
        showPickUp:false,
        pickUpTableData:[],
        pickUpTableCols:[
          {prop:'guid',label:'选修主键',sort:false,hidden:true},
          {prop:'gradeName',label:'年级',sort:false,hidden:false},
          {prop:'assistantName',label:'辅导员',sort:false,hidden:false},
          {prop:'studentName',label:'学生姓名',sort:false,hidden:false},
          {prop:'majorName',label:'专业',sort:false,hidden:false},
          {prop:'departmentName',label:'学院',sort:false,hidden:false}
        ],
        course:{courseName:'',createTime:'',updateTime:'',createOperator:'',teacherName:''},//当前修改课程
        rules:{},//校验规则
        showDialog:false,
        cols:[{prop:'courseNo',label:'课程号',sort:false,hidden:true},
          {prop:'courseName',label:'课程名',sort:false,hidden:false},
          {prop:'teacherName',label:'授课教师',sort:false,hidden:false},
          {prop:'createTime',label:'创建时间',sort:true,hidden:false,dataType:'date'},
          {prop:'updateTime',label:'更新时间',sort:true,hidden:false,dataType:'date'},
          {prop:'operate',label:'操作',hidden:false,options:[
              {label:'编辑',prop:'edit'},
              {label:'删除',prop:'delete',type:'danger'}
            ]}
        ],
        filterOption:'all',
        options:[{
          label:'全部',value:'all'
        },{
          label:'我发布的',value:'my'
        }]
      }
    },
    methods:{
      browserPickUp(){
        let g=this;
        debugger
        if (g.isEmptyObject(g.currentCourse)){
          g.message({message:'并没有选中任何课程',type:'error'});
          return;
        }else{
          g.$ajaxGet('/coursePickUpInfo/getPickUpListByCourse',{courseNo:g.currentCourse.courseNo}).then(data=>{
            g.pickUpTableData=data;
            g.$nextTick(()=>{
              g.showPickUp=true;
            })
          })

        }

      },
      //当前行改变事件
      currentChange(rows){
        let g=this;
        if (rows.length==0){
          g.currentCourse={};
          return;
        }
        g.currentCourse=JSON.parse(JSON.stringify(rows[rows.length-1]));

      },
      //加载课程列表
      async loadTeacherCourse(){
        let g=this;
        g.loading=true;
        g.tableData=[];
        let tableData=await g.loadCourse();
        tableData=tableData.map(d=>{
          //编辑删除权限
            if (d.teacherId!==g.userId) {
              g.$set(d, 'disableOptions', ['edit','delete']);
            }
            return d;
          });
          //过滤自己的课程
          if (g.filterOption==='my'){
            g.tableData=tableData.filter(table=>{
              return table.teacherId===g.userId;
            })

          }else{
            g.tableData=tableData;
          }
          g.$nextTick(()=>{
            //必须要重置回去，避免没有数据
            g.$refs.course_table.resetPage();
            g.loading=false;
          })
      },
      //修改删除课程
      async handleCourse(index,row,customType){
        let g=this;
        if (customType==='edit'){
          this.showDialog=true;
          this.course={...row};
        }else{//删除课程
          let attendance=await g.$ajaxGet('/attendanceParent/all',{courseNo:row.courseNo});
          let students=await g.$ajaxGet('/coursePickUpInfo/all',{courseNo:row.courseNo});
          if (!g.isNullOrEmpty(attendance) && attendance.length>0){
            g.message({message:'该课程已开始考勤,现在无法删除',type:'warning'});
          }else if(!g.isNullOrEmpty(students) && students.length>0){
            g.message({message:'该课程已有学生选修,请联系管理员进行此操作',type:'warning'});
          }
          else{
            g.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              g.$ajaxDelete('/course/deleteOneCourse/'+row.courseNo).then(result => {
                  g.message({
                    type: 'success',
                    message: '删除成功!'
                  })
              }

              )
            }).catch(() => {
              g.message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        }
      },
      //修改保存课程
      async saveCourse(){
        //只允许修改课程名,需要先判断课程名是否存在
        let g=this;
        let haveExist=await g.$ajaxGet('/course/all',{courseName:g.course.courseName});
        if (!g.isNullOrEmpty(haveExist) && haveExist.length>0){
          g.message({message:'同名课程已存在！',type:'warning'});
        }else{
          g.$ajaxPost('/course/updateByCourseNo',{courseNo:g.course.courseNo,courseName:g.course.courseName}).then(res=>{
            g.showDialog=false;
            g.$nextTick(()=>{
              g.loadTeacherCourse();
              g.message({message:'更新成功！',type:'success'});
            })

          });
        }
      }
    },

    created() {
      this.loadTeacherCourse();
    }
  }
</script>

<style scoped>

</style>
